document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.container')
  const audio = document.getElementById('audio')
  const playBtn = document.getElementById('play')
  const prevBtn = document.getElementById('prev')
  const nextBtn = document.getElementById('next')

  const titleEl = document.querySelector('.song-title')
  const artistEl = document.querySelector('.song-artist')
  const lyricsTextEl = document.querySelector('.song-text p')
  const songArtImg = document.querySelector('.pSong img')
  const singerArtImg = document.querySelector('.pSinger img')
  const discWrapper = document.querySelector('.disc-wrapper')
  const discArtImg = document.querySelector('.disc-img')

  const progressWrapper = document.querySelector('.progress-bar-wrapper')
  const progressBar = document.querySelector('.progress-bar')
  const currentTimeEl = document.querySelector('.current-time')
  const totalTimeEl = document.querySelector('.total-time')

  const songs = [
    {
      title: '歌曲名',
      artist: '歌手名',
      lyrics: '歌词',
      audioSrc: '../../public/audio/1.mp3',
      imgSrc: '../../public/img/3.jpg',
      singerSrc: '../../public/img/2.jpg',
    },
    {
      title: '歌曲名',
      artist: '歌手名',
      lyrics: '歌词',
      audioSrc: '../../public/audio/1.mp3',
      imgSrc: '../../public/img/1.jpg',
      singerSrc: '../../public/img/4.jpg',
    },
    {
      title: '歌曲名',
      artist: '歌手名',
      lyrics: '歌词',
      audioSrc: '../../public/audio/1.mp3',
      imgSrc: '../../public/img/5.jpg',
      singerSrc: '../../public/img/6.jpg',
    },
  ]

  let currentSongIndex = 0
  let isPlaying = false

  function resetAnimation() {
    discWrapper.style.animation = 'none'
    void discWrapper.offsetHeight
    discWrapper.style.animation = ''
  }

  function loadSong(song) {
    resetAnimation()

    titleEl.textContent = song.title
    artistEl.textContent = song.artist

    lyricsTextEl.style.opacity = 0
    setTimeout(() => {
      lyricsTextEl.innerText = song.lyrics
      lyricsTextEl.style.opacity = 1
    }, 300)

    audio.src = song.audioSrc
    songArtImg.src = song.imgSrc
    singerArtImg.src = song.singerSrc
    discArtImg.src = song.imgSrc
  }

  function playSong() {
    isPlaying = true
    container.classList.add('playing')
    audio.play()
  }

  function pauseSong() {
    isPlaying = false
    container.classList.remove('playing')
    audio.pause()
  }

  function playPauseToggle() {
    if (isPlaying) {
      pauseSong()
    } else {
      playSong()
    }
  }

  function nextSong() {
    currentSongIndex++
    if (currentSongIndex > songs.length - 1) {
      currentSongIndex = 0
    }
    loadSong(songs[currentSongIndex])
    playSong()
  }

  function prevSong() {
    currentSongIndex--
    if (currentSongIndex < 0) {
      currentSongIndex = songs.length - 1
    }
    loadSong(songs[currentSongIndex])
    playSong()
  }

  function updateProgress(e) {
    const {duration, currentTime} = e.srcElement
    if (duration) {
      const progressPercent = (currentTime / duration) * 100
      progressBar.style.width = `${progressPercent}%`

      totalTimeEl.textContent = formatTime(duration)
      currentTimeEl.textContent = formatTime(currentTime)
    }
  }

  function setProgress(e) {
    const width = this.clientWidth
    const clickX = e.offsetX
    const duration = audio.duration

    if (duration) {
      audio.currentTime = (clickX / width) * duration
    }
  }

  function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${minutes}:${secs < 10 ? '0' : ''}${secs}`
  }

  playBtn.addEventListener('click', playPauseToggle)
  prevBtn.addEventListener('click', prevSong)
  nextBtn.addEventListener('click', nextSong)
  audio.addEventListener('timeupdate', updateProgress)
  audio.addEventListener('ended', nextSong)
  progressWrapper.addEventListener('click', setProgress)

  loadSong(songs[currentSongIndex])
})
